/**
* 基础菜单 商品管理
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>个人中心</el-breadcrumb-item>
    </el-breadcrumb>

    <el-container style="margin-top: 20px;">
      <el-aside id="aside">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>个人资料</span>
          </div>
          <el-row>
            <el-upload
              class="avatar-uploader"
              :multiple="false"
              :http-request="uploadFile"
              action="/officeSystem/file/upload"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload">
              <el-avatar v-if="user.userImgurl" :size="160" :src="user.userImgurl"></el-avatar>
              <!--                <img v-if="user.userImgurl" :src="user.userImgurl" class="avatar">-->
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-row>
          <el-row>
            <span id="userName" :title="user.userName">{{user.userName}}</span>
          </el-row>
          <el-row>
            <span :title="user.userCode">{{user.userCode}}</span>
          </el-row>
          <el-row>
            <span :title="user.remark">{{user.remark}}</span>
          </el-row>
        </el-card>
        <el-button @click="updateUser('user')">修改资料</el-button>
        <el-button @click="updateUser('password')">修改密码</el-button>
      </el-aside>
      <el-dialog title="修改资料" :visible.sync="updateUserVisible" width="30%" :before-close="updateUserBeforeClose">
        <el-form :model="user" :rules="userRules" ref="user" label-width="80px" class="demo-ruleForm">
          <el-form-item label="编码" prop="userCode">
            <el-input v-model="user.userCode" disabled></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="userName">
            <el-input v-model="user.userName"></el-input>
          </el-form-item>
          <el-form-item label="部门" prop="departmentName">
            <el-input v-model="user.departmentName" disabled></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="phone" >
            <el-input v-model="user.phone" maxlength="11"></el-input>
          </el-form-item>
          <el-form-item label="个人说明" prop="remark">
            <el-input v-model="user.remark"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="resetForm">重置</el-button>
          <el-button type="primary" @click="submitForm">保存</el-button>
        </span>
      </el-dialog>

      <el-main>
        <el-card shadow="hover">
          <div class="clearfix backlog">
            <div style="float: left">
              <span>我的待办</span>
            </div>
            <div style="float: right">
              <el-button type="success" @click="signDialogOpen" icon="el-icon-check" circle
                         v-if="signVisible"></el-button>
              <el-button @click="signDialogVisible = true" icon="el-icon-map-location" circle v-else></el-button>
            </div>

          </div>

          <el-tabs v-model="activeName" @tab-click="tabHandleClick">
            <el-tab-pane label="工作清单" name="workOrder">
              <template>
                <el-button @click="haveRead" size="small">标为待办</el-button>
                <el-button @click="haveDone" size="small">标为已办</el-button>
                <el-table
                  :data="workOrdertable"
                  style="width: 100%"
                  height="500"
                  show-overflow-tooltip="true"
                  highlight-current-row
                  @selection-change="workOrderHandleSelectionChange">
                  <el-table-column
                    type="selection"
                    width="55">
                  </el-table-column>
                  <el-table-column
                    width="180"
                    label="开始时间"
                    prop="startTime">
                  </el-table-column>
                  <el-table-column
                    width="180"
                    label="截止时间"
                    prop="endTime">
                  </el-table-column>
                  <el-table-column
                    prop="orderCode"
                    label="工单编码">
                  </el-table-column>
                  <el-table-column
                    prop="orderTitle"
                    label="工单标题">
                  </el-table-column>
                  <el-table-column
                    prop="enableStatus"
                    label="状态">
                    <template slot-scope="scope">
                      <el-tag
                        :type="scope.row.enableStatus === 1 ? 'info' :
                    scope.row.enableStatus === 2 ? 'success' :
                    scope.row.enableStatus === 3 ? 'warning' : ''"
                        disable-transitions>
                        {{scope.row.enableStatus == 1 ? '待阅' :
                        scope.row.enableStatus == 2 ? '待办' :
                        scope.row.enableStatus == 3 ? '已办' : ''}}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="80"
                    label="操作">
                    <template slot-scope="scope">
                      <el-button type="text" @click="viewWorkOrderDetails(scope.row)">查看详情</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <!-- 分页组件 -->
                <Pagination v-bind:child-msg="pageparm" @callFather="pageCallFather"></Pagination>
              </template>
            </el-tab-pane>
            <el-tab-pane label="消息清单" name="message">
              <template>
                <el-button @click="haveReadMessage" size="small">标为已读</el-button>
                <el-button @click="delMessage" size="small">删除选中</el-button>
                <el-table
                  :data="messagetable"
                  style="width: 100%"
                  max-height="480"
                  show-overflow-tooltip="true"
                  highlight-current-row
                  @selection-change="messageHandleSelectionChange">
                  <el-table-column
                    type="selection"
                    width="55">
                  </el-table-column>
                  <el-table-column
                    width="180"
                    prop="sendTime"
                    label="发送时间"
                    sortable>
                  </el-table-column>
                  <el-table-column
                    prop="messageCode"
                    label="消息编码">
                  </el-table-column>
                  <el-table-column
                    prop="sendUser.userName"
                    label="发送人">
                  </el-table-column>
                  <el-table-column
                    prop="messageStatus"
                    label="状态">
                    <template slot-scope="scope">
                      <el-tag
                        :type="scope.row.messageStatus === 1 ? 'info' : ''"
                        disable-transitions>
                        {{scope.row.messageStatus == 1 ? '未读' : ''}}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="80"
                    label="操作">
                    <template slot-scope="scope">
                      <el-button type="text" @click="viewMessageDetails(scope.row)">查看详情</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <!-- 分页组件 -->
                <Pagination v-bind:child-msg="pageparm" @callFather="pageCallFather"></Pagination>
              </template>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-main>
    </el-container>

    <el-dialog
      :title="workOrder.orderTitle"
      :visible.sync="workOrderVisible">
      <div v-html="workOrder.orderContent"></div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="workOrderVisible = false">取 消</el-button>
    <el-button type="primary" @click="workOrderVisible = false">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog title="消息详情" width="30%" :visible.sync="messageOuterVisible">
      <el-row :gutter="10">
        <el-col :span="6">
          <div>
            发送人：
          </div>
        </el-col>
        <el-col :span="18">
          <div>
            {{message.sendUser.userName}}
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <div>
            发送时间：
          </div>
        </el-col>
        <el-col :span="18">
          <div>
            {{message.sendTime}}
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <div>
            消息内容：
          </div>
        </el-col>
        <el-col :span="18">
          <div>
            {{message.messageContent}}
          </div>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="messageOuterVisible = false">取 消</el-button>
        <el-button type="primary" @click="haveReadMessage">标为已读</el-button>
      </div>
    </el-dialog>

    <!-- 打卡-->
    <el-dialog
      title="今日打卡"
      v-loading="addressLoading"
      element-loading-text="获取定位中，请稍等..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :before-close="signDialogClose"
      :visible.sync="signDialogVisible"
      width="30%"
      center>
      <el-form :model="signForm"
               :rules="rules"
               ref="signForm">
        <el-form-item label="打卡地址：" prop="signAddress">
          <el-input type="text"
                    v-model="signForm.signAddress"
                    auto-complete="off"
                    placeholder="点击右侧按钮获取您的位置" disabled>
            <el-button slot="append" @click="getLocation" icon="el-icon-location-information"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="打卡说明：" prop="signRemark">
          <el-input type="textarea"
                    :autosize="{ minRows: 3, maxRows: 5}"
                    v-model="signForm.signRemark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="signIn">打 卡</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
    import Pagination from '../../components/Pagination'
    import {comparisonObject, getStore, setStore, timestampToTime} from "../../utils/util";
    import {Post, Get} from "../../api/axiosFun";

    export default {
        data() {
            return {
                oldUser: {},
                updateUserVisible: false,

                signForm: {
                    signStatus: '',
                    signAddress: '',
                    signRemark: ''
                },
                //rules前端验证
                rules: {
                    signAddress: [{required: true, message: '请获取打卡地址', trigger: 'blur'}],
                    signAddress: [{required: true, message: '请获取打卡地址', trigger: 'change'}],
                },
                userRules: {
                    userName: [{required: true, message: '请输入姓名', trigger: 'blur'}],
                    phone: [{required: true, message: '请输入手机号码', trigger: 'blur'}],
                },

                addressLoading: false,
                signDialogVisible: false,
                signVisible: false,
                formLabelWidth: '120px',

                errorHandler: false,
                user: {},
                activeName: 'workOrder',

                workOrdertable: [],
                workOrderMultipleSelection: [],
                workOrderParams: {
                    pageIndex: 0,
                    pageSize: 10,
                    enableStatus: 4
                },
                workOrderVisible: false,
                workOrder: {
                    orderTitle: '',
                    orderContent: ''
                },

                messagetable: [],
                messageMultipleSelection: [],
                messageParams: {
                    pageIndex: 0,
                    pageSize: 10,
                    acceptUserId: '',
                    enableStatus: 2,
                    messageStatus: 1
                },
                messageOuterVisible: false,
                message: {
                    sendUser: {
                        userName: ''
                    },
                    sendTime: '',
                    messageContent: ''
                },

                pageparm: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                }
            }
        },
        // 注册组件
        components: {
            //分页组件
            Pagination
        },

        /**
         * 创建完毕
         */
        created() {
            this.user = getStore('userData')
            if (this.user.userImgurl == null) {
                this.errorHandler = true
            }
            this.messageParams.acceptUserId = this.user.id;
            this.getSignRecord();
            this.getNotToDoWorkOrder();
        },

        /**
         * 里面的方法只有被调用才会执行
         */
        methods: {
            getSignRecord() {
                let today = new Date();
                let params = {
                    date: `${today.getFullYear()}` + '-' + `${today.getMonth() + 1 < 10 ? '0' + (today.getMonth() + 1) : today.getMonth() + 1}`,
                    day: `${today.getDate() < 10 ? '0' + today.getDate() : today.getDate()}`
                }
                Get("/officeSystem/signIn/selectRecord", params)
                    .then(result => {
                        if (result.status == 200) {
                            this.signVisible = true;
                            this.signDialogVisible = false;
                        } else {
                            this.signVisible = false;
                        }
                    })
            },
            signIn() {
                this.$refs['signForm'].validate((valid) => {
                    if (valid) {
                        this.signForm.signStatus = 2;
                        Post("/officeSystem/signIn/insert", this.signForm)
                            .then(result => {
                                if (result.status == 200) {
                                    this.$message.success(result.message);
                                    this.getSignRecord();
                                } else {
                                    this.$message.error(result.message);
                                }
                            })
                    } else {
                        return false;
                    }
                });
            },
            signDialogOpen() {
                this.$message.success('今日已打卡')
            },
            signDialogClose(done) {
                this.$confirm('确认取消打卡？')
                    .then(_ => {
                        this.getSignRecord();
                        done();
                    })
                    .catch(_ => {
                    });
            },

            //定位
            getLocation() {
                const self = this
                AMap.plugin('AMap.Geolocation', function () {
                    var geolocation = new AMap.Geolocation({
                        // 是否使用高精度定位，默认：true
                        enableHighAccuracy: true,
                        // 设置定位超时时间，默认：无穷大
                        timeout: 10000,
                    })

                    geolocation.getCurrentPosition()
                    AMap.event.addListener(geolocation, 'complete', onComplete)
                    AMap.event.addListener(geolocation, 'error', onError)

                    function onComplete(data) {
                        // data是具体的定位信息
                        console.log('获取定位成功')
                        self.signForm.signAddress = data.formattedAddress;
                        self.addressLoading = false;
                    }

                    function onError(data) {
                        // 定位出错
                        self.getLngLatLocation()
                    }
                })
            },
            getLngLatLocation() {
                const self = this
                AMap.plugin('AMap.CitySearch', function () {
                    var citySearch = new AMap.CitySearch()
                    citySearch.getLocalCity(function (status, result) {
                        if (status === 'complete' && result.info === 'OK') {
                            // 查询成功，result即为当前所在城市信息
                            self.$message.warning("获取定位失败，通过ip获取当前位置")
                            //逆向地理编码
                            AMap.plugin('AMap.Geocoder', function () {
                                var geocoder = new AMap.Geocoder({
                                    // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                                    city: result.adcode
                                })

                                var lnglat = result.rectangle.split(';')[0].split(',')

                                geocoder.getAddress(lnglat, function (status, data) {
                                    if (status === 'complete' && data.info === 'OK') {
                                        // result为对应的地理位置详细信息
                                        self.signForm.signAddress = data.regeocode.formattedAddress
                                    }
                                })
                            })
                            self.addressLoading = false;
                        } else {
                            self.$message.warning("获取定位失败")
                            self.addressLoading = false;
                        }
                    })
                })
            },

            getNotToDoWorkOrder() {
                Post('/officeSystem/workOrder/selectByQueryCondition', this.workOrderParams)
                    .then(result => {
                        if (result.status == 200 && result.data.resultList.length != 0) {
                            for (let i = 0; i < result.data.resultList.length; i++) {
                                result.data.resultList[i].startTime = timestampToTime(result.data.resultList[i].startTime)
                                result.data.resultList[i].endTime = timestampToTime(result.data.resultList[i].endTime)
                            }
                            this.pageparm.total = result.data.totalCount;
                            this.workOrdertable = result.data.resultList;
                        } else {
                            this.pageparm.total = result.data.totalCount;
                            this.workOrdertable = [];
                        }
                    })
            },
            getUnReadMessage() {
                Post('/officeSystem/message/selectByQueryCondition', this.messageParams)
                    .then(result => {
                        if (result.status == 200 && result.data.resultList.length != 0) {
                            for (let i = 0; i < result.data.resultList.length; i++) {
                                result.data.resultList[i].sendTime = timestampToTime(new Date(result.data.resultList[i].sendTime).getTime())
                            }
                            this.pageparm.total = result.data.totalCount;
                            this.messagetable = result.data.resultList;
                        } else {
                            this.pageparm.total = result.data.totalCount;
                            this.messagetable = [];
                        }
                    })
            },

            haveRead() {
                let list = []
                if (this.workOrderMultipleSelection.length == 0) {
                    this.$message.warning("请选中要操作的数据");
                    return;
                }
                list = list.concat(this.workOrderMultipleSelection)
                let params = {
                    params: JSON.stringify(list)
                }
                let url = '/officeSystem/workOrder/updateHaveRead';
                Post(url, params)
                    .then(result => {
                        if (result.status == 200) {
                            this.$message.success(result.message);
                            this.getNotToDoWorkOrder()
                        } else {
                            this.$message.error(result.message);
                        }
                    })
            },

            haveDone() {
                let list = []
                if (this.workOrderMultipleSelection.length == 0) {
                    this.$message.warning("请选中要操作的数据");
                    return;
                }
                list = list.concat(this.workOrderMultipleSelection)
                let params = {
                    params: JSON.stringify(list)
                }
                let url = '/officeSystem/workOrder/updateHaveDone';
                Post(url, params)
                    .then(result => {
                        if (result.status == 200) {
                            this.$message.success(result.message);
                            this.getNotToDoWorkOrder()
                        } else {
                            this.$message.error(result.message);
                        }
                    })
            },

            haveReadMessage() {
                let list = []
                if (this.messageOuterVisible) {
                    let _message = {
                        id: this.message.id,
                        messageStatus: this.message.messageStatus
                    }
                    list.push(_message)
                } else {
                    if (this.messageMultipleSelection.length == 0) {
                        this.$message.warning("请选中要操作的数据");
                        return;
                    }
                    list = list.concat(this.messageMultipleSelection)
                }
                let params = {
                    params: JSON.stringify(list)
                }

                let url = '/officeSystem/message/haveRead';
                Post(url, params)
                    .then(result => {
                        if (result.status == 200) {
                            this.$message.success(result.message);
                            this.messageOuterVisible = false;
                            this.getUnReadMessage();
                        } else {
                            this.$message.error(result.message);
                        }
                    })
            },

            delMessage() {
                let list = []
                if (this.messageMultipleSelection.length == 0) {
                    this.$message.warning("请选中要操作的数据");
                    return;
                }
                list = list.concat(this.messageMultipleSelection)
                this.$confirm('此操作将删除选中消息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let params = {
                        params: JSON.stringify(list)
                    }
                    let url = '/officeSystem/message/delMessage';
                    Post(url, params)
                        .then(result => {
                            if (result.status == 200) {
                                this.$message.success(result.message);
                                this.getUnReadMessage()
                            } else {
                                this.$message.error(result.message);
                            }
                        })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            workOrderHandleSelectionChange(val) {
                this.workOrderMultipleSelection = val;
            },
            messageHandleSelectionChange(val) {
                this.messageMultipleSelection = val;
            },
            // 分页插件事件
            pageCallFather(param) {
                if (this.activeName == 'message') {
                    this.messageParams.pageIndex = param.currentPage - 1;
                    this.messageParams.pageSize = param.pageSize;
                    this.getUnReadMessage();
                } else {
                    this.workOrderParams.pageIndex = param.currentPage - 1;
                    this.workOrderParams.pageSize = param.pageSize;
                    this.getNotToDoWorkOrder();
                }
            },

            viewWorkOrderDetails(row) {
                // this.$alert('<div v-html="content"></div>', 'HTML 片段', {
                //   dangerouslyUseHTMLString: true
                // });

                this.workOrderVisible = true;
                this.workOrder = row;
            },

            viewMessageDetails(row) {
                this.messageOuterVisible = true;
                this.message = row;
            },

            tabHandleClick(tab, event) {
                if (tab.name == 'message') {
                    this.getUnReadMessage();
                } else {
                    this.getNotToDoWorkOrder();
                }
                this.activeName = tab.name;
                this.pageparm = {
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                }
                this.pageCallFather(this.pageparm);
            },

            uploadFile(file) {
                const uploadForm = new FormData();
                uploadForm.append('file', file.file);
                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
                this.$axios.post("/officeSystem/file/upload", uploadForm, config)
                    .then(result => {
                        if (result.data.status == 200) {
                            this.user.userImgurl = result.data.data.fileUrl
                            this.errorHandler = !this.errorHandler
                            Post("/officeSystem/user/update", {
                                id: this.user.id,
                                userImgurl: this.user.userImgurl
                            })
                                .then(result => {
                                    if (result.status == 200) {
                                        this.$message.success(result.message);
                                        setStore("userData", this.user)
                                    } else {
                                        this.$message.error(result.message);
                                    }
                                })
                        } else {
                            this.user.userImgurl = null
                        }
                    })
            },
            updateUser(data) {
                if(data === 'user'){
                    this.oldUser = JSON.parse(JSON.stringify(this.user));
                    this.updateUserVisible = true;
                }else if(data === 'password'){
                    this.$prompt('请输入原密码', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    }).then(({ value }) => {
                        Post("/officeSystem/user/checkPassword", {
                            id: this.user.id,
                            loginPassword: value
                        }).then(result => {
                            if(result !== true){
                                this.$message({
                                    type: 'warning',
                                    message: '密码错误'
                                });
                            }else{
                                this.$prompt('请输入要修改的密码', '提示', {
                                    confirmButtonText: '确定',
                                    cancelButtonText: '取消',
                                }).then(({ value }) => {
                                    this.$confirm('是否修改为：'+value, '提示', {
                                        confirmButtonText: '确定',
                                        cancelButtonText: '取消',
                                        type: 'warning'
                                    }).then(() => {
                                        Post("/officeSystem/user/update", {
                                            id: this.user.id,
                                            loginPassword: this.user.userName
                                        })
                                            .then(result => {
                                                if (result.status == 200) {
                                                    this.$message.success("修改成功");
                                                    setStore("userData", this.user)
                                                    this.updateUserVisible = false;
                                                } else {
                                                    this.$message.error("修改失败");
                                                }
                                            })
                                    }).catch(() => {
                                        this.$message.info("已取消修改");
                                    });
                                }).catch(() => {
                                    this.$message.info("已取消修改");
                                });
                            }
                        })
                    }).catch(() => {
                        this.$message.info("已取消修改");
                    });
                }
            },
            submitForm(){
                Post("/officeSystem/user/update", {
                    id: this.user.id,
                    userName: this.user.userName,
                    phone: this.user.phone,
                    remark: this.user.remark
                })
                    .then(result => {
                        if (result.status == 200) {
                            this.$message.success(result.message);
                            setStore("userData", this.user)
                            this.updateUserVisible = false;
                        } else {
                            this.$message.error(result.message);
                        }
                    })
            },
            resetForm(){
                this.user = JSON.parse(JSON.stringify(this.oldUser))
            },
            updateUserBeforeClose(done){
                let bool = JSON.stringify(this.oldUser) === JSON.stringify(this.user);
                console.log(bool)
                if(!bool){
                    this.$confirm('检测到未保存的内容，是否取消保存修改？?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.resetForm();
                        this.updateUserVisible = false;
                    }).catch(() => {

                    });
                }else{
                    this.updateUserVisible = false;
                }
            },

            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        }
    }
</script>

<style type="less" scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .el-aside {
    padding: 20px;
    text-align: center;
    font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  }

  .el-card {
    margin-bottom: 40px;
  }

  .item {
    /*margin-top: 10px;*/
    margin-right: 40px;
  }

  #userName {
    font-size: 32px;
  }


  #remark {
    font-size: 20px;
  }


  .el-row {
    margin-bottom: 20px;

    &
    :last-child {
      margin-bottom: 0;
    }

  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .backlog {
    justify-items: center;
    height: 50px;
  }

  .el-button.is-circle {
    font-size: 25px;
    height: 60px;
    width: 60px;
  }
</style>


